<template lang="">
    <div class='layout'>
        <div class='banner'>
          <router-link class='banner-s' to="/demo7">这是demo7</router-link>
          <router-link class='banner-s' to="/demo4">这是demo4</router-link>

        </div>
        <div class='bottom'>
            <div class='left'>left</div>
            <div class='right-box'>
                <div class='conent'>
                    <div class='ab-box'>
                      
                      <router-view></router-view>
                       <slot></slot>
                    </div>
                </div>
               <div class='foot'>111</div>
            </div>
            
        </div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="scss" scoped>
  .layout{
    height: 100vh;
    // background-color: aqua;
    --banner-height:92px;
    .banner{
        height: var(--banner-height);
        background-color: rgb(231, 231, 231);
         display: flex;
          align-items: center;
          justify-content: center;
        .banner-s{
          color: rgb(71, 73, 73);
          text-decoration: none;
          padding-left: 15px;
        }
    }
    .bottom{
      //  background-color: rgb(76, 131, 180);
       height:calc(100% - var( --banner-height));
         display:flex;
         
         .left{
            background-color: orange;
            width: 200px;
         }
         .right-box{
              // background-color: brown;
              flex: 1;
             display: flex;
             flex-direction: column;
               
       .conent{
        // background-color: chartreuse;
        flex: 1 ;
        position: relative;
          .ab-box{
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              overflow: auto;
        }
       }
        
         .foot{
            background-color: black;
            height: 40px;
            display: flex;
            // flex-direction: column;
           
         }
         }
          
         
    }
  }
    
</style>